<template>
  <div class="gift-panel" v-if="isVisible">
    <div class="gift-panel-overlay" @click="closePanel"></div>
    <div class="gift-panel-content">
      <div class="gift-panel-header">
        <h3>🎁 选择礼物</h3>
        <button class="close-btn" @click="closePanel">×</button>
      </div>
      
      <div class="gift-categories">
        <button 
          v-for="category in giftCategories" 
          :key="category.id"
          class="category-btn"
          :class="{ active: selectedCategory === category.id }"
          @click="selectedCategory = category.id"
        >
          {{ category.name }}
        </button>
      </div>
      
      <div class="gift-grid">
        <div 
          v-for="gift in filteredGifts" 
          :key="gift.id"
          class="gift-item"
          :class="{ selected: selectedGift?.id === gift.id }"
          @click="selectGift(gift)"
        >
          <div class="gift-icon">{{ gift.icon }}</div>
          <div class="gift-name">{{ gift.name }}</div>
          <div class="gift-price">{{ gift.price }}币</div>
        </div>
      </div>
      
      <div class="gift-panel-footer">
        <div class="selected-gift-info" v-if="selectedGift">
          <span>已选择：{{ selectedGift.name }} ({{ selectedGift.price }}币)</span>
        </div>
        <div class="gift-actions">
          <button class="send-gift-btn" @click="sendGift" :disabled="!selectedGift">
            发送礼物
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GiftPanel',
  props: {
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedCategory: 'popular',
      selectedGift: null,
      giftCategories: [
        { id: 'popular', name: '热门' },
        { id: 'love', name: '爱心' },
        { id: 'celebration', name: '庆祝' },
        { id: 'luxury', name: '豪华' }
      ],
      gifts: [
        // 热门礼物
        { id: 1, category: 'popular', name: '鲜花', icon: '🌹', price: 1 },
        { id: 2, category: 'popular', name: '掌声', icon: '👏', price: 2 },
        { id: 3, category: 'popular', name: '点赞', icon: '👍', price: 3 },
        { id: 4, category: 'popular', name: '爱心', icon: '❤️', price: 5 },
        
        // 爱心礼物
        { id: 5, category: 'love', name: '玫瑰', icon: '🌹', price: 10 },
        { id: 6, category: 'love', name: '巧克力', icon: '🍫', price: 15 },
        { id: 7, category: 'love', name: '钻戒', icon: '💍', price: 50 },
        { id: 8, category: 'love', name: '情书', icon: '💌', price: 8 },
        
        // 庆祝礼物
        { id: 9, category: 'celebration', name: '蛋糕', icon: '🎂', price: 20 },
        { id: 10, category: 'celebration', name: '气球', icon: '🎈', price: 12 },
        { id: 11, category: 'celebration', name: '烟花', icon: '🎆', price: 30 },
        { id: 12, category: 'celebration', name: '香槟', icon: '🍾', price: 25 },
        
        // 豪华礼物
        { id: 13, category: 'luxury', name: '跑车', icon: '🏎️', price: 100 },
        { id: 14, category: 'luxury', name: '游艇', icon: '🛥️', price: 200 },
        { id: 15, category: 'luxury', name: '飞机', icon: '✈️', price: 500 },
        { id: 16, category: 'luxury', name: '城堡', icon: '🏰', price: 1000 }
      ]
    }
  },
  computed: {
    filteredGifts() {
      return this.gifts.filter(gift => gift.category === this.selectedCategory)
    }
  },
  methods: {
    selectGift(gift) {
      this.selectedGift = gift
    },
    
    sendGift() {
      if (!this.selectedGift) return
      
      // 发送礼物信息到父组件
      this.$emit('send-gift', {
        id: this.selectedGift.id,
        name: this.selectedGift.name,
        icon: this.selectedGift.icon,
        price: this.selectedGift.price,
        category: this.selectedGift.category,
        timestamp: Date.now()
      })
      
      // 关闭面板
      this.closePanel()
    },
    
    closePanel() {
      this.$emit('close')
      this.selectedGift = null
    }
  }
}
</script>

<style scoped>
.gift-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gift-panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

.gift-panel-content {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.gift-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gift-panel-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.close-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.gift-categories {
  display: flex;
  padding: 15px 25px;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.category-btn:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  transform: translateY(-2px);
}

.category-btn.active {
  background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
  border-color: #007AFF;
  box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  padding: 25px;
  max-height: 400px;
  overflow-y: auto;
}

.gift-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 15px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.gift-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.gift-item.selected {
  background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
  border-color: #007AFF;
  box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
  transform: translateY(-3px);
}

.gift-icon {
  font-size: 32px;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gift-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.gift-price {
  color: #FFD700;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.gift-panel-footer {
  padding: 20px 25px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-gift-info {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.send-gift-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.send-gift-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.send-gift-btn:disabled {
  background: linear-gradient(135deg, #666 0%, #555 100%);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 滚动条样式 */
.gift-grid::-webkit-scrollbar {
  width: 6px;
}

.gift-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.gift-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.gift-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>
